<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/txx.js"></script>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <txx ref="t" @myinfo="a"></txx>
        <main class="c900 el-card">
        <div class="flex" style="align-items: stretch">
            <div class="left">
                <h3>{{carInfo.brand}} <small>{{carInfo.model}}</small></h3>
                <el-carousel arrow="always">
                    <el-carousel-item v-for="p in carPath">
                        <img :src="p.path">
                    </el-carousel-item>

                </el-carousel>
                <div class="flex" style="padding-block: 20px">
                    <el-rate v-model="rate"></el-rate>
                    <div class="price">￥{{carInfo.price}}<small>元/天</small></div>
                    <div class="intro">
                        <p>{{carInfo.intro}}</p>

                    </div>
                </div>
            </div>
            <div class="right">
                <h4 style="margin-left: 20px;margin-top: 68px">选择用车时间</h4>
                <el-calendar v-model="value">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div style="height: 100%"
                             :style="{backgroundColor: dates.find(d=>d==data.day)?'#09f':'#fff',
                                                color: dates.find(d=>d==data.day)?'#fff':data.type=='current-month'?'initial':'#ddd'}">
                            <!--  整个日历的样式   -->
                            <input :disabled="isDisabled(date)" type="checkbox" v-model="dates" :value="data.day" :id="data.day" style="display: none">
                            <!-- 选择 -->
                            <label :style="{backgroundColor:isDisabled(date)?'#aaa':''}"  style="font-size: 0.7em" :for="data.day"> {{ data.day.split('-')[2] }}</label>
                            <!-- 渲染文本 -->
                        </div>
                    </template>
                </el-calendar>
                <div class="flex">
                    <div class="flex price" style="margin-left: 20px">
                        <small style="color: #0a68b1">合计:</small>￥{{dates.length * carInfo.price}}<small>元</small>
                    </div>
                    <button class="abtn" @click="leaseCar">现在预订</button>
                </div>
            </div>
        </div>
        <div style="border:1px solid #e5eef8; margin: 20px">
            <h3 style="background-color: #ccccff55; padding: 20px;margin: 0px">评论</h3>
            <div v-for="c in comment" class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar :src="c.headimg"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <div class="flex">
                        <span style="color: #1e50a2;">{{c.cname}}</span>
                        <small>{{c.time}}</small>
                    </div>
                    <p>{{c.content}}</p>
                </div>
            </div>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar :src="myinfo.headimg"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <textarea name="" id="" cols="30" rows="6" style="width: 100%" v-model="content"></textarea>
                    <div style="text-align: right">
                        <el-button @click="putComment">发表</el-button>
                    </div>
                </div>
            </div>
        </div>
    </main>


</div>
<script>
    var v = new Vue({
        el : "#app",
        data: {
            value: new Date(),
            // dates 用户选择的日期
            dates: [],
            // dated 此车已经被租出去的日期
            dated:[
                "2025-01-03",
                "2025-01-04",
                "2025-01-05",
            ],
            rate: 4,
            carInfo:{},
            carPath:{},
            remark: "",
            content: "",
            myinfo:{},
            comment: [],
        },
       //  watch 监听数据变化
        watch:{
            // 监听用户租车日期的选择， 禁止用户选择已经过去的日期
            dates(newValue, oldValue){
                var minus = newValue.filter(function(v){ return oldValue.indexOf(v) == -1 })
                if((new Date().getTime() - new Date(minus).getTime()) > 0){
                    this.$alert("此时间不可租赁")
                    this.dates.pop()
                }

            }
        },
        created(){
            axios.get("txxCar/carInfo"+location.search)
                .then(res=> {
                    this.carInfo = res.data.data
                    this.getLeasedays();
                });

            axios.get("txxCar/imageByCid"+location.search)
                .then(res=>this.carPath = res.data.data);

            axios.get("txxComment/getCommentByCid"+location.search)
                .then(res=> {
                    this.comment = res.data
                    this.timeAgo();
                })

        },
        methods:{
            a(myinfo){
                this.myinfo = myinfo;
            },
            isDisabled(date){
                const currentDateString = date.toISOString().split('T')[0];
                return this.dated.includes(currentDateString);
            },
            leaseCar(){
                this.dates.sort();
                const leaseCars = {
                    cid: this.carInfo.id,
                    days: this.dates.join(","),
                    money: this.dates.length * this.carInfo.price,
                    remark: this.remark
                }
                if(this.dates.length == 0){
                    this.$alert("请选择租赁日期")
                    return
                }
                axios.post("txxLease/leaseCar", leaseCars ).then(res=>{
                    if (res.data.code == 1) {
                        this.$message(res.data.msg)
                    }else{
                        this.$alert(res.data.msg)
                    }

                })
            },
            getLeasedays(){
                axios.get("txxLease/getLeasedays",{
                    params:{
                        cid: this.carInfo.id
                    }
                }).then(res=>{
                    res.data.data.forEach(item=>{
                        var s = item.days.split(",");
                        s.forEach(i=>{
                            this.dated.push(i);
                        })
                    })
                })
            },
            putComment(){
                if(this.myinfo.id == null){
                    sessionStorage.setItem("goto", location.toString())
                    location.href = "login.html"

                }
                if(this.content == ''){
                    this.$alert("评论内容不能为空")
                    return
                }
                var time = new Date();
                const comment = {
                    id: null,
                    uid: this.myinfo.id,
                    cid: location.search.split('=')[1],
                    content: this.content,
                    time: time.toISOString()
                }
                axios.post("txxComment/putComment", comment).then(res=>{
                    this.$message(res.data)
                    comment.headimg = this.myinfo.headimg
                    comment.cname = this.myinfo.cname
                    comment.time = "刚刚"
                    this.comment.push(comment)
                })
            },
            // 评论时间处理, 前端时间挫处理
            // TODO
            timeAgo() {
                this.comment.forEach(item=>{
                    const date = new Date(item.time);
                    const current = new Date(new Date().getTime() - date.getTime())
                    const minutes = Math.floor((current / 60000)); // 确保分钟是两位数
                    if(minutes < 1){
                        item.time = '1分钟前'
                    }else if( minutes >= 1 && minutes < 60){
                        item.time = minutes + '分钟前'
                    }else if( minutes >= 60 && minutes < 60 * 24){
                        item.time = Math.floor(minutes / 60) + '小时前'
                    }else{
                        item.time = "很久之前"
                    }
                })




            }
        }
    })
</script>
</body>
</html>
